<script setup lang="ts">
import AddCreative from "~/contentScripts/views/wxt/BatchAddingProducts/components/AddCreative.vue";
import AddCrowd from "~/contentScripts/views/wxt/BatchAddingProducts/components/AddCrowd.vue";
import AddResult from "~/contentScripts/views/wxt/BatchAddingProducts/components/addResult.vue";
import AddSearchKeywords from "~/contentScripts/views/wxt/BatchAddingProducts/components/AddSearchKeywords.vue";
import ConfirmPlansProducts from "~/contentScripts/views/wxt/BatchAddingProducts/components/ConfirmPlansProducts.vue";
import ConfirmUser from "~/contentScripts/views/wxt/BatchAddingProducts/components/UserConfirm.vue";
import MultipleChoicePlansTable
  from "~/contentScripts/views/wxt/BatchAddingProducts/components/multipleChoicePlansTable.vue";
import MultipleChoiceProductsTable
  from "~/contentScripts/views/wxt/BatchAddingProducts/components/multipleChoiceProductsTable.vue";
import ProductCategory from "~/contentScripts/views/wxt/BatchAddingProducts/components/productCategory.vue";
import {WxtBizCode} from "~/contentScripts/views/wxt/lib/wxtUtils";
import WxtModal from "~/contentScripts/views/wxt/wxt-modal.vue";

const title = '批量添加商品-测新快';
const props = defineProps({
  visible: {
    type: Boolean,
    default: false,
  },
  bizCode: {
    type: String as PropType<WxtBizCode>,
    default: WxtBizCode["货品运营-测新快"],
  }
});
const emit = defineEmits([
  "update:visible",
  "close",
]);
const steps: any[] = [
  {
    title: '添加宝贝',
    component: MultipleChoiceProductsTable,
    value: [],
    key: 'choiceProduct',
  },
  {
    title: '选择计划',
    component: MultipleChoicePlansTable,
    value: [],
    key: 'choicePlan',
  },
  {
    title: '宝贝确认',
    component: ConfirmPlansProducts,
    value: [],
    key: 'confirmProduct',
  },
  // {
  //   title: '添加关键词',
  //   component: AddSearchKeywords,
  //   value: [],
  //   key: 'addKeyword',
  // },
  // {
  //   title: '添加创意',
  //   component: AddCreative,
  //   value: [],
  //   key: 'addCreative',
  // },
  // {
  //   title: '添加人群',
  //   component: AddCrowd,
  //   value: [],
  //   key: 'addAudience',
  // },
  {
    title: '用户确认',
    component: ConfirmUser,
    value: [],
    key: 'userConfirm',
  },
  {
    title: '添加结果',
    component: AddResult,
    value: [],
    key: 'addResult',
  },
];
const categoryId = ref<number | undefined>(undefined);
const items = steps.map(item => ({
  key: item.title,
  title: item.title
}));
const current = ref(0);
</script>

<template>
  <wxt-modal :title="title" width="97%" :visible="visible" @close="()=>{
    emit('close');
    emit('update:visible',false);
  }"
  >
    <a-steps :current="current" :items="items" style="margin-bottom: 20px;" @change="(c)=>{
      // 不可以大于当前步骤
      if(c>current){
        return;
      }else {
        current = c;
      }
    }"
    ></a-steps>
    <component :is="steps[current].component" v-if="steps[current].component" v-model:value="steps[current].value"
               :bizCode="bizCode"
               :data="steps.map(item=>{ return {value:item.value,key:item.key,title:item.title}})"
               :categoryId="categoryId" @next="current++" @prev="()=>{
      if(current>0){
        current--;
      }
    }"
               @close="()=>{
                   emit('close');
                   emit('update:visible',false);
               }"
    />
  </wxt-modal>
</template>

<style scoped>

</style>
